import React from 'react';
import {SliderProps, SliderState} from "antd/lib/slider";
import {Slider, Row, Col } from 'antd';
import './index.less'
import Input from "antd/lib/input/Input";
export interface HYSliderProps extends SliderProps{

}

export interface HYSliderState extends SliderState{

  unitString?:string;//单位
  hideRightUnit?:boolean;//隐藏右边 单位框，
}

class HYSlider extends React.Component<HYSliderProps, HYSliderState> {


  constructor(props) {
    super(props);

    const {defaultValue, tipFormatter } = this.props;
    let inputValue = tipFormatter ? tipFormatter(defaultValue) : '';

    this.state = {
      inputValue,
    };

  }

  onChange = (value:number) => {

    const { tipFormatter } = this.props;
    let inputValue = tipFormatter ? tipFormatter(value) : '';

    this.setState({
      inputValue,
    });
  }

  render() {
    const { inputValue } = this.state;
    const {hideRightUnit,...restProps} = this.props;
    return (
      <Row className="hy-slider" align="center" justify="center">
        <Col span={hideRightUnit?24:16}>
          <Slider
            {...restProps}
            onChange={this.onChange}
          />
        </Col>
        <Col span={hideRightUnit?0:8}>
          <Input
            disabled={true}
            style={{
              backgroundColor: '#fff',
              width:'105px',
              height:'32px',
              marginLeft: "47px",
              width: '105px',
              height: '32px',
              marginTop: '6px'}}
            value={inputValue }
          />
        </Col>
      </Row>
    );
  }
}

export default HYSlider;
